import React from 'react'
import ReactDOM from 'react-dom'
import fetch from 'isomorphic-fetch'
import { Input, Button, Carousel, Select, notification } from 'antd';
import bg from './../img/newsucai/bg1.png'
import userpic from './../img/newsucai/userpic.png'
import bottompic from './../img/newsucai/bottompic.png'
import passwordpic from './../img/newsucai/passwordpic.png'

var storage = window.localStorage;

const { Option } = Select;
class Mobile_login extends React.Component {
  constructor(props) {
    super(props)

  }

  state = {
    sfz: "",
    openid: "",
    corplistdata: [],
    corpid: "",
    formdata: { username: "", password: "" },
    deviceno: ""
  }





  handlepassword = () => {
    if (event && event.target && event.target.value) {
      let value = event.target.value;
      // alert(value)
      this.setState(() => ({ password: value }))
    }

  }


  handlechange_normal = (key, e) => {
    //this.openNotification(e.target.value)
    let data = Object.assign({}, this.state.formdata, { [key]: e.target.value });
    this.setState({ formdata: data })
  };

  checkdatavalid = (...args) => {
    for (let item of args) {    //for of 推荐用在遍历数组
      var checkvalue = this.state.formdata[item]
      if (checkvalue == "" || checkvalue == null || checkvalue == undefined)
        return false;
    }
    return true;
  };




  //这个日期字符串获取更好用，根据需求返回三种1：年月日 2年月日时分秒 31970开始时间秒数用作id
  getCurrentDate = (format) => {
    var now = new Date();
    var year = now.getFullYear(); //得到年份
    var month = now.getMonth();//得到月份
    var date = now.getDate();//得到日期
    var day = now.getDay();//得到周几
    var hour = now.getHours();//得到小时
    var minu = now.getMinutes();//得到分钟
    var sec = now.getSeconds();//得到秒
    month = month + 1;
    if (month < 10) month = "0" + month;
    if (date < 10) date = "0" + date;
    if (hour < 10) hour = "0" + hour;
    if (minu < 10) minu = "0" + minu;
    if (sec < 10) sec = "0" + sec;
    var time = "";
    //精确到天
    if (format == 1) {
      time = year + "-" + month + "-" + date;
    }
    //精确到分
    else if (format == 2) {
      time = year + "-" + month + "-" + date + " " + hour + ":" + minu + ":" + sec;
    }
    else if (format == 3) {
      time = now.getTime();
    }
    else if (format == 4) {
      time = year + "--" + month + "--" + date;
    }

    return time;
  }

  //通用提醒
  openNotification = (text) => { notification.open({ message: '提示', description: text, onClick: () => { }, }); };

  handlelogin = () => {


    if (!this.checkdatavalid("username", "password")) {
      this.openNotification("检查表格是否为空")
      return false;
    }
    var ddd = this.state;
    var logintime = this.getCurrentDate(2)
    //alert("登陆系统")
    fetch("/admin/sys/login", {
      method: 'POST',
      mode: 'cors',
      // credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ "data": this.state.formdata })
    }
    ).then(response => {

      return response.json();
    }).then(data => {

      if (data.rowlength == 0) {
        this.openNotification("验证不通过，登录失败")

      }
      else if (data.rowlength == 1) {

        var returndata = data.recordsets[0][0]
        storage.ygxm = returndata.xm;
        storage.ygbh = returndata.gh;
        storage.userid = returndata.id;
        storage.logintime = logintime;
        storage.islogin = 'loginin';
        //alert(JSON.stringify(storage))
        this.openNotification(`欢迎您，${returndata.xm}!`)
        this.props.history.push({ pathname: '/shipSRM_mobile/mobile_mainpage', state: {} });
      }
    });



  }



  querycorplist = () => {
    fetch("/admin/customlist/getcorplist", {
      method: 'POST',
      mode: 'cors',
      // credentials: 'include',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ "data": this.state })
    }
    ).then(response => {

      return response.json();
    }).then(data => {
      this.setState({
        corplistdata: data.rows
      });

    });


  }



  handlechangeSelect_normal_bb = (key, value, option) => {

    storage.loginbb = value;

  };


  handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      this.handlelogin()
    }
  }


  handlechangeSelect_normal_cx = (key, value, option) => {
    storage.logincxbm = value;
    storage.logincx = option.props.children;


  };


  componentDidMount() {
    if (storage.islogin == 'loginin') {
      this.props.history.push({ pathname: '/shipSRM_mobile/mobile_mainpage', state: {} });
    }
    else {

      storage.printername = ""
      //this.getwxconfig();
      document.addEventListener('keydown', this.handleKeyDown);
      storage.loginbb = "A班";
      storage.logincx = "1#线";
      storage.logincxbm = "A09";

    }

  }


  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyDown);
  }

  // 输入框失去焦点时，将页面滚动到顶部
  inputOnBlur = () => {
    
    window.scroll(0, 0);

     
  }


  render() {
    const options = this.state.corplistdata.map(d => <Option value={d.ID}>{d.CORPNAME}</Option>);


    return (
      <div style={{ width: "100vw", height: "200vw", position: "absolute", backgroundColor: "#294CEB" }}>

        <div style={{ height: "40vw", width: "80%", top: "0", left: "10%", position: "relative" }}>
          <div style={{ height: "20vw", top: "24vw", position: "relative" }}>
          <h2 style={{ fontWeight: "bold", color: "#f8dc0b" }}>SHIP SCM</h2>
          <h2 style={{ fontWeight: "bold", color: "white" }}>欢迎登录江西一舟SRM系统</h2>
          </div>
        </div>
        <div style={{ height: "100vw", width: "80%", top: "40vw", position: "absolute", left: "10%" }}>
          <div style={{ height: "15%", width: "100%", position: "relative", top: "5%", margin: "0", padding: "0", display: "flex", color: "black", fontSize: "1.2rem", fontWeight: "bold", alignItems: "center", justifyContent: "center" }}>
            <div style={{ height: "100%", width: "20%", backgroundImage: `url(${userpic}) `, backgroundSize: "90%", position: "absolute", top: "0", left: "0", backgroundColor: "#ccd5ff", borderTopLeftRadius: "0.2rem", borderBottomLeftRadius: "0.2rem" }}>
            </div>
            <div style={{ height: "100%", width: "80%", position: "absolute", top: "0", right: "0", backgroundColor: "#ccd5ff", borderTopRightRadius: "0.2rem", borderBottomRightRadius: "0.2rem" }}>
              <input type="text" placeholder="请输入用户名" style={{ width: "100%", height: "100%", border: "none", backgroundColor: "transparent", fontSize: "0.8rem", color: "black", textIndent: "1rem" }} onChange={e => this.handlechange_normal("username", e)} />
            </div>
          </div>
          <div style={{ height: "15%", width: "100%", position: "relative", top: "10%", marginTop: "5%", padding: "0", display: "flex", color: "black", fontSize: "1.2rem", fontWeight: "bold", alignItems: "center", justifyContent: "center" }}>
            <div style={{ height: "100%", width: "20%", backgroundImage: `url(${passwordpic}) `, backgroundSize: "90%", position: "absolute", top: "0", left: "0", backgroundColor: "#ccd5ff", borderTopLeftRadius: "0.2rem", borderBottomLeftRadius: "0.2rem" }}>

            </div>

            <div style={{ height: "100%", width: "80%", position: "absolute", top: "0", right: "0", backgroundColor: "#ccd5ff", borderTopRightRadius: "0.2rem", borderBottomRightRadius: "0.2rem" }}>
              <input type="password" placeholder="请输入密码" style={{ width: "100%", height: "100%", border: "none", backgroundColor: "transparent", fontSize: "0.8rem", color: "black", textIndent: "1rem" }} onChange={e => this.handlechange_normal("password", e)} />
            </div>
          </div>
          <div style={{ height: "10%", width: "100%", position: "relative", top: "10%", marginTop: "5%", padding: "0", display: "flex", color: "black", fontSize: "1.1rem", fontWeight: "bold", alignItems: "center", justifyContent: "center" }}>
            <div style={{ height: "100%", width: "100%", position: "absolute", top: "0", right: "0", borderTopRightRadius: "0.2rem", borderBottomRightRadius: "0.2rem" }}>
              <Select  style={{ width: "100%", textAlign: 'center', height: "100%",}} size='large' onChange={this.handlebzChange} defaultValue="早班"
                options={[{ value: '早班', label: '早班', }, { value: '晚班', label: '晚班', },]} placeholder="请选择班次"
              />
            </div>
          </div>
          {/* <div style={{ height: "10%", width: "100%", position: "relative", top: "10%", marginTop: "5%", padding: "0", display: "flex", color: "black", fontSize: "1.1rem", fontWeight: "bold", alignItems: "center", justifyContent: "center" }}>
            <div style={{ height: "100%", width: "100%", position: "absolute", top: "0", right: "0", borderTopRightRadius: "0.2rem", borderBottomRightRadius: "0.2rem" }}>
              <Select  style={{ width: "100%", textAlign: 'center', height: "100%",}} size='large' onChange={this.handlecxChange}
                options={[{ value: '1#线', label: '1#线', }, { value: '2#线', label: '2#线', }, { value: '3#线', label: '3#线', }]} placeholder="请选择产线"
              />
            </div>
          </div> */}
          <div style={{ height: "15%", width: "100%", position: "relative", top: "10%", left: "0", marginTop: "10%", padding: "0", display: "flex", color: "black", fontSize: "1.2rem", fontWeight: "bold", alignItems: "center", justifyContent: "center" }}>
            <Button type="primary" onClick={this.handlelogin}
              style={{
                position: "relative", height: "3rem", fontSize: "1rem", width: "100%", left: "0", borderRadius: "0.2rem", backgroundColor: "#294CEB", border: "none", borderStyle: "solid", borderColor: "white",
                right: "0", margin: "auto", color: "white"
              }}
              large><strong>登录</strong></Button>

          </div>

        </div>
        <div style={{ height: "60vw", width: "100%", top: "140vw", position: "absolute", backgroundImage: `url(${bottompic}) `, backgroundSize: "100%" }}>

        </div>



      </div>
    )
  }
}

export default Mobile_login
//styles
var styles = {
  containertyle: {
    height: "92vh", width: "100vw", position: "absolute",
    left: "0", right: "0", margin: "auto",
    top: "0", backgroundImage: "linear-gradient(to bottom right, #00AAEB , #A28CB9)"
  }

}






